import React from 'react'
import PropTypes from 'prop-types'
import {connect} from 'dva'
import {Tabs, Select, Modal, Button} from 'antd'
import {routerRedux} from 'dva/router'
import InterestingList from './InterestingList'
import HotList from './HotList'
import {layer} from 'components'
import {Template, Loader} from 'components'

const {Interesting, Restaurant} = Template

const Option = Select.Option

const TabPane = Tabs.TabPane

const EnumPostStatus = {
  INTERESTING: 1,
  HOT: 2,
}


const Index = ({taiList, dispatch, loading, location}) => {
  const {data, detail, styleType,pagination, modelVisable} = taiList
  const {query = {type: '1'}, pathname} = location
  const {type} = query

  if (!data) return null
  const {select = [], list = []} = data
  const ListInterProps = {
    pagination,
    dataSource: type === '1' ? list : [],
    loading: loading.effects['taiList/query'],
    onChange(page) {
      dispatch(routerRedux.push({
        pathname,
        query: {
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        },
      }))
    },
  }
  const ListHotProps = {
    pagination,
    dataSource: type === '2' ? list : [],
    loading: loading.effects['taiList/query'],
    onChange(page) {
      dispatch(routerRedux.push({
        pathname,
        query: {
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        },
      }))
    },
  }

  const handleTabClick = (key) => {
    dispatch(routerRedux.push({
      pathname,
      query: {
        type: key,
      },
    }))
  }

  const handleChange = (value) => {
    dispatch(routerRedux.push({
      pathname,
      query: {
        type,
        regions: value
      },
    }))
  }

  const handleStyleChange = (value) => {
    dispatch({type: 'taiList/updateState', payload: {
      styleType: value
    }})
  }

  const gatheredHandel = ({...values}) => {
    dispatch({type: 'taiList/gather', payload: values})
  }

  const viewDetail = ({id, type}) => {
    dispatch({type: 'taiList/updateState', payload: {
      modelVisable: true
    }})
    dispatch({type: 'taiList/queryDetail', payload: {id, type}})
  }



  return (<div className="content-inner">
    <Tabs
      activeKey={query.type === String(EnumPostStatus.INTERESTING) ? String(EnumPostStatus.INTERESTING) : String(EnumPostStatus.HOT)}
      onTabClick={handleTabClick}>
      <TabPane tab="有趣的" key={String(EnumPostStatus.INTERESTING)}>
        <Select defaultValue='9681' style={{width: 120, marginBottom: 10}} onChange={handleChange}>
          {
            select.map((item, key) => <Option key={key} value={item.regionId}>{item.name}</Option>)
          }
        </Select>
        <InterestingList {...ListInterProps} gatheredHandel={gatheredHandel} viewDetail={viewDetail}/>
      </TabPane>
      <TabPane tab="热门" key={String(EnumPostStatus.HOT)}>
        <Select defaultValue='9681' style={{width: 120, marginBottom: 10}} onChange={handleChange}>
          {
            select.map((item, key) => <Option key value={item.regions}>{item.name}</Option>)
          }
        </Select>
        <HotList {...ListHotProps} gatheredHandel={gatheredHandel} viewDetail={viewDetail}/>
      </TabPane>
    </Tabs>

    {
      modelVisable ?
        <Modal
          title={<div>
            详情
            <Select defaultValue={1} style={{ width: 120, marginLeft: 20 }} onChange={handleStyleChange}>
              <Option value={1} key={1}>有样式</Option>
              <Option value={0} key={2}>无样式</Option>
            </Select>
          </div>}
          visible={modelVisable}
          footer={null}
          width={1000}
          bodyStyle={{width: 750, marginLeft: 'auto',marginRight: 'auto', paddingTop: 20, paddingBottom: 20}}
          onCancel={() => {
            dispatch({
              type: 'taiList/updateDetail',
              payload: {
                detail: null,
                modelVisable:false
              }
            })
          }}
        >
          {
            detail ?
              type === '1' ? <Interesting data={detail} styleType={styleType} /> : <Restaurant data={detail} styleType={styleType}/>
              : <Loader fullScreen={false} spinning={true} text='翻译中。。。'></Loader>
          }
        </Modal>
        : null
    }
  </div>)
}

Index.propTypes = {
  taiList: PropTypes.object,
  loading: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
}

export default connect(({taiList, loading}) => ({taiList, loading}))(Index)
